<!DOCTYPE html>
<html>
<head>
    <title>营销短信表</title>
    <#include "/header.html">
    <!-- js-xlsx -->
    <script src="${request.contextPath}/statics/plugins/js-xlsx/xlsx.full.min.js"></script>
</head>
<body>

<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="row">
            <div class="col-md-3">
                <h3>导入手机号码</h3>
                <button class="btn" type="button" @click="pushPhone">立即创建</button>
            </div>
            <div class="col-md-3">
                <h3>个性化营销</h3>
                <button class="btn" type="button" @click="personality">立即创建</button>
            </div>
            <div class="col-md-3">
                <h3>新客户转化</h3>
                <button class="btn" type="button">立即创建</button>
            </div>
            <div class="col-md-3">
                <h3>老客户召回</h3>
                <button class="btn" type="button">立即创建</button>
            </div>
        </div>
        <br>
        <table id="jqGridPeople"></table>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <!--弹层:创建导入手机号码 -->
    <div id="pushPhone" style="display: none;">
        <form class="form-horizontal" id="phoneForm">
            <input type="hidden" name="type" value="1">
            <div class="form-group">
                <div class="form-group">
                    <div class="col-md-3 control-label"><span style="color: red">*&nbsp;</span>手机号码：</div>
                    <div class="col-md-8">
                        <textarea id="phoneTextarea" name="phones" cols="80" rows="5" class="form-control" placeholder="Excel格式A1:手机号码,A2-AN:具体手机号码.手动添加格式13800138000,13800138001,13800138002…… 使用英文逗号分隔"></textarea>
                    </div>
                    <div class="col-md-3 col-md-offset-3 control-label">
                        <input type="file" onchange="importExcel(this)" />
                    </div>
                    <div class="col-md-3 col-md-offset-1 control-label">
                        <button type="button" id="btn2">下载模板</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3 control-label"><span style="color: red">*&nbsp;</span>发送时间：</div>
                    <div class="col-md-8">
                        <input class="form-control input-sm" @click="checkBeginDate" placeholder="发送时间" name="sendTime"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3 control-label"><span style="color: red">*&nbsp;</span>短信内容：</div>
                    <div class="col-md-8">
                        <textarea name="content" cols="80" rows="5" class="form-control"></textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--弹层:个性化营销 -->
    <div id="personality" style="display: none;">
        <form class="form-horizontal" id="personalityForm">
            <input type="hidden" name="type" value="2">
            <div class="form-group">
                <div class="form-group">
                    <div class="col-md-3 control-label"><span style="color: red">*&nbsp;</span>发送对象：</div>
                    <div class="col-md-8">
                        <select class="form-control input-sm" name="peopleName">
                            <option  v-for="item in peopleEntityList" :value="item.id" >{{item.peopleName}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3 control-label"><span style="color: red">*&nbsp;</span>发送时间：</div>
                    <div class="col-md-8">
                        <input class="form-control input-sm" @click="checkBeginDate" placeholder="发送时间" name="sendTime"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3 control-label">优惠券：</div>
                    <div class="col-md-8">
                        <input type="text" class="form-control input-sm" name="coupon"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-3 control-label"><span style="color: red">*&nbsp;</span>短信内容：</div>
                    <div class="col-md-8">
                        <textarea name="content" cols="80" rows="5" class="form-control"></textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--弹层:修改时间间隔 -->
    <div id="changeTime" style="display: none;">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="form-group">
                    <div class="col-md-3 control-label"><span style="color: red">*&nbsp;</span>时间间隔(天)：</div>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="gapDay" placeholder="时间间隔"/>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!--查看start-->
    <div v-show="!showList" class="panel panel-default" align="center">
        <div style="margin-bottom: 5px;">
            <span style="margin-right: 10px;margin-top: 10px" class="pull-right">
                <span v-if="showInfo">
                    <a href="javascript:;" @click="businessMessageUpdate">保存</a>
                    &nbsp;
                    <a href="javascript:;" @click="businessMessageCancel">取消</a>
                </span>
                <span v-else>
                    <a href="javascript:;" @click="businessMessageEdit"><i class="fa fa-edit"></i>&nbsp;修改营销短信</a>
                </span>
            </span>
        </div>
        <form class="form-horizontal" id="updateForm">
            <input type="hidden" v-model="businessMessage.id" name="id">
            <div class="form-group">
                <div class="col-sm-2 control-label">短信类型</div>
                <div class="col-sm-10">
                    <select v-model="businessMessage.type" class="form-control input-sm" disabled name="type">
                        <option v-for="item in messageTypeEnum" :value="item.id">{{item.describe}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">计划发送时间</div>
                <div class="col-sm-10">
                    <input class="form-control input-sm" v-model="businessMessage.sendTime" @click="checkBeginDate" placeholder="发送时间" :readonly="!showInfo" name="sendTime"/>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-2 control-label">内容</div>
                <div class="col-sm-10">
                    <textarea name="content" cols="58" rows="10" v-model="businessMessage.content" :readonly="!showInfo" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group" v-show="businessMessage.type==2">
                <div class="col-sm-2 control-label">发送对象</div>
                <div class="col-sm-10">
                    <select class="form-control input-sm" v-model="businessMessage.peopleName" disabled>
                        <option  v-for="item in peopleEntityList" :value="item.id" >{{item.peopleName}}</option>
                    </select>
                </div>
            </div>
            <div class="form-group" v-show="businessMessage.type==2">
                <div class="col-sm-2 control-label">优惠券</div>
                <div class="col-sm-10">
                    <input type="text" readonly class="form-control input-sm" v-model="businessMessage.coupon" placeholder="优惠券"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">发送条数</div>
                <div class="col-sm-10">
                    <input type="text" readonly class="form-control input-sm" v-model="businessMessage.sendCount" placeholder="发送条数"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">状态</div>
                <div class="col-sm-10">
                    <input type="text" readonly class="form-control" :value="businessMessage.status == 0 ? '未发送' : '已发送'"/>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-sm" @click="reload" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-sm" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
    <!--查看end-->
</div>

<script src="${request.contextPath}/statics/js/modules/business/businessmessage.js?_${.now?long}"></script>
<script>
    /*
             FileReader共有4种读取方法：
             1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
             2.readAsBinaryString(file)：将文件读取为二进制字符串
             3.readAsDataURL(file)：将文件读取为Data URL
             4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
                          */
    var wb; //读取完成的数据
    var worksheet = [];
    var text = [];
    var rABS = false; //是否将文件读取为二进制字符串

    function importExcel(obj) { //导入
        if (!obj.files) {
            return;
        }
        const IMPORTFILE_MAXSIZE = 1 * 2048; //这里可以自定义控制导入文件大小
        var suffix = obj.files[0].name.split(".")[1]
        if (suffix != 'xls' && suffix != 'xlsx') {
            alert('导入的文件格式不正确!')
            return
        }
        if (obj.files[0].size / 1024 > IMPORTFILE_MAXSIZE) {
            alert('导入的表格文件不能大于2M')
            return
        }
        var f = obj.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            if (rABS) {
                wb = XLSX.read(btoa(fixdata(data)), { //手动转化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(data, {
                    type: 'binary'
                });
            }
            //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
            //wb.Sheets[Sheet名]获取第一个Sheet的数据
            worksheet = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
            var u = eval('(' + worksheet + ')');
            //获取表格中表头为'手机号码'的那列存入text中
            for (var i = 0; i < u.length; i++) {
                if(isPoneAvailable(u[i].手机号码))
                    text.push(u[i].手机号码);
            }
            document.getElementById("phoneTextarea").innerHTML = text
        };
        if (rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    }
    //手机号码正则
    function isPoneAvailable(str) {
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(str)) {
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>